import { VerticalBox , HorizontalBox, Button, ListView } from "std-widgets.slint";
import { BorderlessWindow } from "borderless-window.slint";
import { Theme, JsonTheme, Settings, IntSettTypes } from "globals.slint";
import { SlideOver } from "slidover.slint";
import { HLClick } from "hyperlink.slint";
import { ThemeCallbacks } from "themeconfig.slint";
import { Slider } from "slider.slint";
import { TimerConfig } from "timerconfig.slint";
import { ConfigCallbacks } from "config.slint";
import { ToolTip, TTPosition } from "tooltip.slint";
export { HLClick, Theme, JsonTheme, Settings, ThemeCallbacks, ConfigCallbacks }
import { CircularProgress } from "circular-progress.slint";

export enum ActiveTimer {
    focus,
    short-break,
    long-break,
}

export enum TimerAction {
    start,
    stop,
    reset,
    skip,
}

export component Main inherits BorderlessWindow {
    title: "Tomotroid";
    width: 360px;
    height: 480px;
    always-on-top: on_top();

    in-out property<image> logo <=> slideover.logo;

    in property<duration> target-time: root.tmr-config.focus-time;
    in-out property<duration> remaining-time: root.target-time;

    out property<int> volume: Settings.volume;
    out property<TimerConfig> tmr-config: slideover.tmr-config;
    in-out property<ActiveTimer> active-timer: focus;
    in property<int> active-round: 1;
    in-out property<bool> running: false;


    callback close-window();
    callback minimize-window();
    callback move-window();

    callback action-timer(TimerAction);

    callback tick(duration);
    callback change-timer();

    close => {
        root.close-window();
    }

    minimize => {
        root.minimize-window();
    }

    move() => {
        root.move-window();
    }

    menu-toggled => {
        slideover.expanded = self.menu-open;
    }

    tick(passed-time) => {
        root.remaining-time = max(root.remaining-time - passed-time, 0);

        if (root.remaining-time == 0) {
            change-timer();
        }
    }

    function get_prog_color() -> color {
        if (root.active-timer == ActiveTimer.focus) {
            Theme.focus-round
        } else if (root.active-timer == ActiveTimer.short-break) {
            Theme.short-round
        } else {
            Theme.long-round
        }
    }

    function time-remaining() -> string {
        floor(root.remaining-time / 60s) + ":" + (mod(root.remaining-time, 60s)/1s < 10 ? "0" : "") + floor(mod(root.remaining-time, 60s)/1s)
    }

    function current-timer-string() -> string {
        if (root.active-timer == ActiveTimer.focus) {
            "FOCUS"
        } else if (root.active-timer == ActiveTimer.short-break) {
            "SHORT BREAK"
        } else {
            "LONG BREAK"
        }
    }

    function on_top() -> bool {
        Settings.always-on-top
            &&
            (
                active-timer == ActiveTimer.focus
                ||
                (
                    !Settings.break-always-on-top
                )
            )
    }

    vol-popup := PopupWindow {
        sldr := Slider {
            width: parent.width;
            height: 100%;
            value <=> root.volume;
            minimum: 0;
            maximum: 100;
            color: Theme.background-lightest;
            ft-color: Theme.background-lightest;
            ghv-color: Theme.accent;
            mt-color: Theme.background-lightest;
            vertical: true;

            value-changed(int) => {
                Settings.int-changed(IntSettTypes.Volume, int);
            }
        }
        x: 310px;
        y: 270px;
        height: 100px;
        width: 20px;
    }

    VerticalLayout {
        states [
            vis when root.menu-open : {
                opacity: 0;
                in {
                    animate opacity {
                        duration: 100ms;
                        delay: 0ms;
                        easing: ease-in-out;
                    }
                }
            }
            not-vis when !root.menu-open: {
                opacity: 1;
                in {
                    animate opacity {
                        duration: 100ms;
                        delay: 250ms;
                        easing: ease-in-out;
                    }
                }
            }
        ]

        HorizontalLayout {
            padding-top: 60px;
            padding-left: 50px;
            padding-right: 50px;

            alignment: center;
            VerticalBox {
                height: 230px;
                width: 230px;
                circ-prog := CircularProgress {
                    height: self.width;
                    progress: remaining-time / target-time;
                    bg_color: Theme.background-lightest;
                    fg_color: root.get_prog_color();
                    txt_color: Theme.foreground;
                    prog_text: root.time-remaining();
                    lbl_text: current-timer-string();
                }
            }
        }

        //In Pomotroid there is a transition between play/pause where the whole circle fades out then back in
        //I'm not sure how I can actually get this to fade out then in unless I have the play / pause as 2
        //seperate buttons, because the transition is essentially from full opactity to full opacity. Since
        //it's a boolean, either running or not...how could I add a third state in between with 0 opacity?
        //as this is cosmetic, I'll leave it alone for now, and maybe come
        //back to it later when I have a mostly functioning program.
        HorizontalLayout {
            alignment: center;
            padding: 20px;
            //opacity: 0.05;
            //opacity: root.running ? 1 : 0.99;

            /*animate opacity {
                duration: 1000ms;
                //easing: ease-in-out;
                //easing: ease-in-out-back;
                easing: cubic-bezier(0,2.04,0.53,-1.31);
            }*/

            states [
                rng when root.running : {
                    opacity: 1;
                    out {
                        animate opacity {
                            duration: 250ms;
                            //easing: ease-out;
                            //easing: ease-in-out-back;
                            easing: cubic-bezier(0,2.04,0.53,-1.31);
                        }
                    }
                    in {
                        animate opacity {
                            duration: 250ms;
                            //easing: ease-in;
                            easing: ease-in-out-back;
                        }
                    }
                }

                ntrng when !root.running : {
                    //opacity: 0.05;
                    opacity: 1;
                    out {
                        animate opacity {
                            duration: 250ms;
                            //easing: ease-out;
                            easing: ease-in-out-back;
                        }
                    }
                    in {
                        animate opacity {
                            duration: 250ms;
                            //easing: ease-in;
                            easing: ease-in-out-back;
                        }
                    }
                }
            ]

            Rectangle {
                border-color: Theme.foreground-darkest;
                border-width: 2px;
                border-radius: self.height*0.5;
                height: 50px;
                width: 50px;

                animate background {
                    duration: 200ms;
                    easing: ease-in-out;
                }

                StartBtn-ta := TouchArea {
                    clicked => {
                        if (root.running) {
                            root.action-timer(TimerAction.stop);
                        } else {
                            root.action-timer(TimerAction.start);
                        }
                    }
                }

                Image {
                    source: root.running ? @image-url("../assets/icons/pause.svg") : @image-url("../assets/icons/start.svg");
                    animate colorize {
                        duration: 200ms;
                        easing: ease-in-out;
                    }

                    states [
                        hvr when StartBtn-ta.has-hover : {
                            colorize: Theme.accent;
                        }

                        nthvr when !StartBtn-ta.has-hover : {
                            colorize: Theme.foreground;
                        }
                    ]
                }

                states [
                    hvr when StartBtn-ta.has-hover : {
                        background: Theme.background.brighter(0.2);
                    }
                    nthvr when !StartBtn-ta.has-hover : {
                        background: Theme.background;
                    }
                ]
            }
        }
        HorizontalLayout {
            alignment: space-between;
            padding-top: -10px;
            padding-left: 20px;
            padding-right: 15px;
            padding-bottom: -10px;
            Text {
                font-family: "Lato";
                font-weight: 900;
                text: "\{root.active-round}/\{root.tmr-config.rounds}";
                font-size: 16px;
                color: Theme.foreground-darker;
                vertical-alignment: center;
            }
            HorizontalBox {
                min-width: 80px;
                Rectangle {
                    y: parent.height/2 - self.height/2;
                    SkipBtn-ta := TouchArea {
                        clicked => {
                            action-timer(TimerAction.skip)
                        }
                    }
                    Image {
                        source: @image-url("../assets/icons/skip.svg");
                        height: 20px;
                        animate colorize {
                            duration: 250ms;
                            easing: ease-in-out;
                        }

                        states [
                            hvr when SkipBtn-ta.has-hover : {
                                colorize: Theme.accent;
                            }

                            nthvr when !SkipBtn-ta.has-hover : {
                                colorize: Theme.background-lightest;
                            }
                        ]
                    }
                }

                Rectangle {
                    y: parent.height/2 - self.height/2;
                    MuteBtn-ta := TouchArea {
                        clicked => {
                            vol-popup.show();
                        }
                    }
                    mt-img := Image {
                        height: 20px;
                        animate colorize {
                            duration: 250ms;
                            easing: ease-in-out;
                        }

                        states [
                            muted when root.volume == 0 : {
                                source: @image-url("../assets/icons/muted.svg");
                            }

                            audible when root.volume > 0 : {
                                source: @image-url("../assets/icons/mute.svg");
                            }
                        ]
                    }

                    states [
                        hvr when MuteBtn-ta.has-hover : {
                            mt-img.colorize: Theme.accent;
                        }

                        nthvr when !MuteBtn-ta.has-hover : {
                            mt-img.colorize: Theme.background-lightest;
                        }
                    ]
                }
            }
        }

        HorizontalLayout {
            padding-top: 5px;
            padding-left: 15px;
            padding-right: 15px;
            alignment: start;
            Text {
                ResetBtn-ta := TouchArea {
                    clicked => {
                        action-timer(TimerAction.reset)
                    }
                }
                font-weight: 900;
                text: "Reset";
                font-size: 14px;

                states [
                    hvr when ResetBtn-ta.has-hover : {
                        color: Theme.accent;
                    }

                    nthvr when !ResetBtn-ta.has-hover : {
                        color: Theme.foreground-darker;
                    }
                ]
            }
        }
    }

    skip-tt := ToolTip {
        owner-x: SkipBtn-ta.absolute-position.x;
        owner-y: SkipBtn-ta.absolute-position.y - 38px/*title bar height*/;
        owner-height: SkipBtn-ta.height;
        owner-width: SkipBtn-ta.width;
        position: TTPosition.Bottom;
        show: SkipBtn-ta.has-hover;
        text: "Skip the Current Round";
    }

    mute-tt := ToolTip {
        owner-x: MuteBtn-ta.absolute-position.x;
        owner-y: MuteBtn-ta.absolute-position.y - 38px/*title bar height*/;
        owner-height: MuteBtn-ta.height;
        owner-width: MuteBtn-ta.width;
        position: TTPosition.Bottom;
        show: MuteBtn-ta.has-hover;
        text: "Mute";
    }

    reset-tt := ToolTip {
        owner-x: ResetBtn-ta.absolute-position.x;
        owner-y: ResetBtn-ta.absolute-position.y - 38px/*title bar height*/;
        owner-height: ResetBtn-ta.height;
        owner-width: ResetBtn-ta.width;
        position: TTPosition.Right;
        show: ResetBtn-ta.has-hover;
        text: "Reset Current Round";
    }

    slideover := SlideOver {
        x: 0px;
        y: 30px;
        width: root.width;
        height: parent.height - 68px;
        expanded: false;
    }
}
